import React from 'react';
import {Table, Divider, Modal} from 'antd';
import Page from 'components/common/Page';
import SearchBar from './SearchBar';
import { model } from 'utils/model';
// import { Operation } from 'components/common';
// import { STSTUSKEY } from 'configs/constants';
import AddModal from './Modals/AddModal';
import fields from './fields';
import FieldsList from './Modals/FieldsList';

@model('dataTemplate')
class DataTemplate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visAdd: false,
      visFields: false,
      record: {}
    };
    this.settingHandler = this.settingHandler.bind(this);
    this.opt = this.opt.bind(this);
  }

  opt(del, params) {
    Modal.confirm({
      title: '你确定要执行此操作？',
      cancelText: '取消',
      okText: '确定',
      onOk() {
        del(params);
      }
    });
  }


  // 扩展字段
  extraFields() {
    const { del } = this.props;
    const settingHandler = this.settingHandler;
    const opt = this.opt;
    const extra = [
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <span>
            <a href="javascript:;" onClick={() => settingHandler('visAdd', true, record)}>修改</a>
            <Divider type="vertical" />
            <a href="javascript:;" onClick={() => settingHandler('visFields', true, record)}>模版字段</a>
            <Divider type="vertical" />
            <a href="javascript:;" onClick={() => opt(del, {id: record.id})}>删除</a>
          </span>
        )
      }
    ];
    return fields.concat(extra);
  }
  settingHandler(type, value, record = {}) {
    console.log(record);
    this.setState({
      record,
      [type]: value
    });
  }

  render() {
    const { 
      config, add, edit, loading, getItemList,
      getList, goPage, getUser, details, getCompanyList,
      updateState, companyList, roleList, getRoleList,
      initDetails, addItem, itemlist, editItem, delItem } = this.props;
    const { visAdd, record, visFields } = this.state;
    const {pagination, list} = config;

    const tableProps = {
      pagination: {
        ...pagination,
        onChange: (current) => {
          goPage(current);
          getList();
        }
      },
      loading: loading.list,
      rowKey: (record, index) => index,
      dataSource: list,
      columns: this.extraFields()
    };
    const searchProps = {
      record,
      add: () => this.settingHandler('visAdd', true),
      onSearch(params) {
        goPage(1);
        getList(params);
      }
    };
    const addProps = {
      getUser,
      record,
      getList,
      details,
      roleList,
      companyList,
      getRoleList,
      getCompanyList,
      loading: loading.add,
      onCancel: () => {
        this.settingHandler('visAdd', false);
        updateState({ details: initDetails });
      },
      onOK: record.id ? edit : add
    };
    const fieldsProps = {
      record,
      loading,
      addItem,
      delItem,
      editItem,
      itemlist,
      getItemList,
      dataTemplateId: record.id,
      onCancel: () => {
        this.settingHandler('visFields', false);
      }
    };

    return (
      <Page inner>
        <div>
          <SearchBar {...searchProps} />
          <Table {...tableProps} style={{marginTop: 20}} />
          { visAdd && <AddModal {...addProps} /> }
          { visFields && <FieldsList {...fieldsProps} /> }
        </div>
      </Page>
    );
  }
}

export default DataTemplate;
